<script setup>
// import { ref } from 'vue'
import { articalStore } from '@/stores/modules/artical.js'
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
const store = articalStore()
const loading = ref(true)
store.getArticalList()
loading.value = false
const dialogVisible = ref(false)
const rule = ref({
  cate_name: [{ required: true, message: '请填写分类名称', trigger: 'blur' }],
  cate_alias: [{ required: true, message: '请填写分类别名', trigger: 'blur' }]
})
const formModel = ref({
  id: '',
  cate_name: '',
  cate_alias: ''
})
const form = ref()
const isAdd = ref(true)
const dele = async (id) => {
  await ElMessageBox.confirm('您确定要删除吗？', '温馨提示', {
    type: 'warn',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  loading.value = true
  store.delArtical(id)
  ElMessage.success('删除成功')
  loading.value = false
}
const add = async (isAdd) => {
  if (isAdd) {
    loading.value = true
    await form.value.validate()
    store.increArtical(formModel.value)
    ElMessage.success('添加成功')
    dialogVisible.value = false
    loading.value = false
  } else {
    loading.value = true
    await form.value.validate()
    store.update(formModel.value)
    ElMessage.success('修改成功')
    dialogVisible.value = false
    loading.value = false
  }
}
const edit = (row) => {
  dialogVisible.value = true
  isAdd.value = false
  formModel.value = row
}
const incre = () => {
  dialogVisible.value = true
  isAdd.value = true
  formModel.value = {
    id: '',
    cate_name: '',
    cate_alias: ''
  }
}
const cancel = () => {
  dialogVisible.value = false
  store.getArticalList()
}
defineOptions({
  name: 'AdminClass'
})
const log = () => {
  console.log(store.articalList)
}
</script>

<template>
  <div>
    <artical-content :header="'文章分类'">
      <template #extra>
        <el-button type="primary" @click="incre">添加分类</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          v-if="store.articalList"
          :data="store.articalList"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            type="index"
            width="100"
          ></el-table-column>
          <el-table-column label="分类名称" prop="cate_name"></el-table-column>
          <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button
                type="primary"
                @click="edit(row)"
                :icon="Edit"
                circle
              />
              <el-button
                type="danger"
                @click="dele(row.id)"
                :icon="Delete"
                circle
              />
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="没有数据"></el-empty>
          </template>
        </el-table>
      </template>
    </artical-content>
    <el-dialog
      v-model="dialogVisible"
      :title="isAdd ? '添加分类' : '编辑分类'"
      width="30%"
    >
      <el-form ref="form" :rules="rule" :model="formModel" label-position="top">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="formModel.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="formModel.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="add(isAdd)"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <button @click="log">123</button>
  </div>
</template>

<style scoped></style>
